<template>
  <div>
    <el-tabs
      :tab-position="tabPosition"
      style="height: 100%"
      v-model="tabIndex"
      @tab-click="selectRuleProperty()"
    >
      <el-tab-pane
        :label="item.name"
        v-for="item in businessNames"
        :key="item.id"
      >
        <div>
          <div>
            <span>业务属性:</span
            ><el-select v-model="businessProperty" placeholder="请选择">
              <el-option
                v-for="item in businessPropertes"
                :key="item.id"
                :label="item.name + ' - ' + item.code"
                :value="item.code"
              >
              </el-option>
            </el-select>
            <el-button type="primary" @click="addProperty()">添加</el-button>
          </div>

          <div class="symbol">
            <span>算数运算符:</span
            ><el-select v-model="mathLogic" placeholder="请选择">
              <el-option
                v-for="item in mathLogics"
                :key="item.code"
                :label="item.name + ' - ' + item.code"
                :value="item.code"
              >
              </el-option>
            </el-select>
            <el-button type="primary" @click="addMath()">添加</el-button>

            <span>逻辑运算符:</span
            ><el-select v-model="ufuncLogic" placeholder="请选择">
              <el-option
                v-for="item in ufuncLogics"
                :key="item.code"
                :label="item.name + ' - ' + item.code"
                :value="item.code"
              >
              </el-option>
            </el-select>
            <el-button type="primary" @click="addUfunc()">添加</el-button>

            <span>括号:</span
            ><el-select v-model="bracket" placeholder="请选择">
              <el-option
                v-for="item in brackets"
                :key="item.code"
                :label="item.name + ' - ' + item.code"
                :value="item.code"
              >
              </el-option>
            </el-select>
            <el-button type="primary" @click="addBracket()">添加</el-button>
          </div>

          <div class="value">
            <span>运算值:</span>
            <div>
              <p class="inputWidth">
                数字:
                <el-input v-model="digital" placeholder="请输入内容"></el-input>
                <el-button type="primary" @click="addVlaue(1)"
                  >添加数字</el-button
                >
              </p>
              <p class="inputWidth">
                字符串:<el-input
                  v-model="string"
                  placeholder="请输入内容"
                ></el-input
                ><el-button type="primary" @click="addVlaue(2)"
                  >添加字符串</el-button
                >
              </p>
              <p>
                日期:
                <el-date-picker
                  v-model="date"
                  type="datetime"
                  placeholder="选择日期时间"
                >
                </el-date-picker>
                <el-button type="primary" @click="addVlaue(3)"
                  >添加日期</el-button
                >
              </p>
              <span>结果值:</span>
              <el-input class="inputWidth"
                  v-model="result"
                  placeholder="请输入内容"
                ></el-input>
            </div>
          </div>
        </div>
      </el-tab-pane>

      <div class="logicInput">
        <el-input v-model="logic"></el-input>
      </div>
    </el-tabs>
  </div>
</template>

<script>
export default {
  name: "BusinessRuleLogic",
  data() {
    return {
      result:"",
      date: "",
      digital: "",
      string: "",
      logic: "",
      tabPosition: "left",
      businessNames: [],
      tabIndex: 0,
      businessPropertes: [],
      businessProperty: "",
      ufuncLogics: [
        {
          name: "或",
          code: "||",
        },
        {
          name: "且",
          code: "&&",
        },
      ],
      ufuncLogic: "",
      brackets: [
        {
          name: "左括号",
          code: "(",
        },
        {
          name: "右括号",
          code: ")",
        },
      ],
      bracket: "",
      mathLogics: [
        {
          name: "大于",
          code: ">",
        },
        {
          name: "大于等于",
          code: ">=",
        },
        {
          name: "小于",
          code: "<",
        },
        {
          name: "小于等于",
          code: "<=",
        },
        {
          name: "等于",
          code: "==",
        },
        {
          name: "不等于",
          code: "!=",
        },
      ],
      mathLogic: "",
    };
  },
  methods: {
    addVlaue(type) {
      if (type === 1) {
        this.logic = this.logic + this.digital;
      }
      if (type === 2) {
        this.logic = this.logic + '"' + this.string + '"';
      }
      if (type === 3) {
        var data = this.$moment(this.date).format("yyyy-MM-DD HH:mm:ss");
        this.logic = this.logic + '"' + data + '"';
      }
    },
    addMath() {
      this.logic = this.logic + this.mathLogic;
    },
    addBracket() {
      this.logic = this.logic + this.bracket;
    },
    addProperty() {
      this.logic = this.logic + 'this["' + this.businessProperty + '"]';
    },
    addUfunc() {
      this.logic = this.logic + this.ufuncLogic;
    },
    selectBusinessName() {
      this.$http({
        method: "GET",
        url: "/businessRuleTemp",
      }).then((resp) => {
        if (resp.data.code === 200) {
          this.businessNames = resp.data.data;
          this.selectRuleProperty(this.businessNames[this.tabIndex].id);
        } else {
          this.$message.error(resp.data.msg);
        }
      });
    },
    selectRuleProperty(businessRuleTempId) {
      if (businessRuleTempId === undefined) {
        businessRuleTempId = this.businessNames[this.tabIndex].id;
      }
      this.$http({
        method: "GET",
        url: "/businessProperty",
        params: {
          businessRuleTempId: businessRuleTempId,
        },
      }).then((resp) => {
        if (resp.data.code === 200) {
          this.businessPropertes = resp.data.data;
        } else {
          this.$message.error(resp.data.msg);
        }
      });
    },
  },
  mounted() {
    this.selectBusinessName();
  },
};
</script>
<style scoped>
.value {
  margin-top: 50px;
}
.logicInput {
  margin-top: 50px;
}
.symbol {
  margin-top: 50px;
}
.el-select .el-input {
  width: 130px;
}
.input-with-select .el-input-group__prepend {
  background-color: #fff;
}
.inputWidth {
  width: 200px;
}
</style>